<template>
  <div class="context_whole">
    <van-nav-bar

        style="background-color:rgb(48, 65, 86);position: fixed"
        title="视频会议"
        fixed="true"
    />
<div>

  <div style="width: 100%;position: fixed">
    <div style="margin-top: 20%">
      <div style="color: #cccccc;height: 10%;margin: 5px 0">WebRTC视频会议</div>
    </div>
    <van-cell-group>
      <van-field
          id="username"
          v-model="username"
          label="会议号"
          placeholder="请输入会议号"
          required
          clearable
          :label-width="100"
         @input="getusername"
      />

      <van-field
          v-model="password"
          type="password"
          label="会议名称"
          placeholder="请输入您的名称"
          :label-width="100"
          @input="getpassword"
      />
    </van-cell-group>
    <div style="width: 80%;margin: 20px auto">
      <van-button  plain type="info" style="margin: 0 auto;width: 100%;" @click="">加入会议</van-button>
    </div>
    <van-cell-group>
      <div style="height: 50px;line-height:50px;margin-left: 15px;" >
          开启麦克风
        <div style="float:right;margin-top:10px;margin-right: 15px ">
          <van-switch  style="margin: auto auto;" v-model="checked"   size="24px"/>
        </div>
      </div>
      <van-cell title="开启听筒"  >
        <van-switch  style="margin: auto auto;" v-model="checked"   size="24px"/>
      </van-cell>
      <van-cell title="静音" style="width:100% " >
        <van-switch  style="margin: auto auto;" v-model="checked"   size="24px"/>
      </van-cell>

<!--      <van-cell title="标题" value="内容" />-->
    </van-cell-group>
  </div>

</div>
    <van-tabbar v-model="active" class="bottom"  inactive-color="black" active-color="#1988f9">
      <van-tabbar-item  name="meeting" icon="wap-home-o" to="/meeting">视频会议</van-tabbar-item>
      <van-tabbar-item name="video" icon="video" to="/video">视频回放</van-tabbar-item>
      <van-tabbar-item name="photo" icon="photo" to="/photo">图片浏览</van-tabbar-item>
      <van-tabbar-item  name="user" icon="user-o" to="/user">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
  </template>
  <script>

    export default {
      name: 'TabBar',
      components:{

      },
      data() {
        return {
          checked:true,
          active:'meeting',
          username:'',
          password:'',
        }
      },
      created(){
      // this.getInput();

      },
      methods: {

        getusername(e){
          this.username=e;
          console.log(this.username);
        },
        getpassword(e){
          this.password=e;
          // console.log(this.password);
        }
      }
    }
  </script>


<style scoped>
.container{
//background-color: #cccccc;
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
}



.active_tab img {
  width: 26px;
  height: 26px;
}

/* 自定义选中的颜色 */
.van-tabbar-item--active {
  color: #d81e06;
}


.tui {
  width: 50px;
  height: 50px;
  margin-top: -40px;
  z-index: 100000;
}

[class*=van-hairline]::after {
  border: none !important
}
</style>
